<template>
  <div class="container">
    <GlobalHeader :user="user"/>
    <!-- <ColumnList :list="list"/> -->
    <ValidateForm @form-submit="sumbitForm">
      <div class="mb-3">
        <label class="form-label">邮箱：</label>
        <ValidateInput placeholder="请输入邮箱地址" :rules="emailRules" v-model="emailVal" type="text"/>
      </div>
      <div class="mb-3">
        <label class="form-label">密码：</label>
        <ValidateInput placeholder="请输入密码" :rules="passwordRules" v-model="passwordVal" type="text"/>
      </div>
    </ValidateForm>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import 'bootstrap/dist/css/bootstrap.min.css'
import ColumnList, {ColumnProps} from "./components/ColumnList.vue"
import GlobalHeader, {UserProps} from "./components/GlobalHeader.vue"
import ValidateForm from "./components/ValidateForm.vue"
import ValidateInput, {RulesProp} from "./components/ValidateInput.vue"
export default defineComponent({
  name: 'App',
  components: {
    ColumnList,
    GlobalHeader,
    ValidateForm,
    ValidateInput,
  },
  setup(){
    let list: ColumnProps[] = [
      {
        id: "1",
        title: "测试标题1",
        avatar: require("./assets/logo.png"),
        description: "我是测试数据1,我是测试数据1,我是测试数据1,我是测试数据1,我是测试数据1."
      },
      {
        id: "2",
        title: "测试标题2",
        avatar: require("./assets/logo.png"),
        description: "我是测试数据1,我是测试数据1,我是测试数据1,我是测试数据1,我是测试数据1."
      },
      {
        id: "3",
        title: "测试标题3",
        avatar: require("./assets/logo.png"),
        description: "我是测试数据1,我是测试数据1,我是测试数据1,我是测试数据1,我是测试数据1."
      },
      {
        id: "4",
        title: "测试标题4",
        avatar: require("./assets/logo.png"),
        description: "我是测试数据1,我是测试数据1,我是测试数据1,我是测试数据1,我是测试数据1."
      },
    ] 
    let user: UserProps = {
      id: "1",
      name: "TE",
      isLogin: true
    }

    let emailRules: RulesProp = [
      {
        type: "required",
        message: "电子邮箱地址不能为空"
      },
      {
        type: "email",
        message: "请输入正确的电子邮箱格式"
      },
    ]
    let passwordRules: RulesProp = [
      {
        type: "required",
        message: "账号密码不能为空"
      }
    ]
    const emailVal = ref("");
    const passwordVal = ref("");
    const sumbitForm = () => {
      console.log(emailVal.value); 
    }
    return {
      list,
      user,
      emailRules,
      sumbitForm,
      emailVal,
      passwordVal,
      passwordRules
    }
  }
});
</script>

<style>
</style>
